<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Admin</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/css/jquery.Jcrop.css">
  <link rel="stylesheet" href="//bgrins.github.io/spectrum/spectrum.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="//bgrins.github.io/spectrum/spectrum.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.color.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
  <script src="https://rawgit.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
  <script src="https://www.google.com/jsapi?autoload={modules:[{name:gdata,version:2.x}]}"></script>
  <script src="https://apis.google.com/js/client.js"></script>
  <script src="./chronopost.config.js"></script>
  <script src="./admin.js"></script>
</head>

<body id="admin" class="ng-cloak">
  <div class="container" ng-controller="editor">
    <div ng-show="domain && site">
      <div>
        <ul class="nav nav-tabs">
          <li ng-class="editMenus || 'active'">
            <a href="javascript:void(0)" ng-click="editMenus = false">Images Editor</a>
          </li>
          <li ng-class="editMenus && 'active'">
            <a href="javascript:void(0)" ng-click="editMenus = true">Menus Editor</a>
          </li>
        </ul>
      </div>
      <div ng-if="!editMenus">
        <h1>Administration de la frise: </h1>
        <table class="images-container">
          <tr>
            <td class="frieze-image" ng-repeat="image in images">
              <div class="order-controller">
                <div class="order-left" ng-if="$index > 0">
                  &lt;-
                  <a href="javascript:void(0)" ng-click="goLeft($index)">left</a>
                </div>
                <div class="order-right" ng-if="$index < images.length - 1">
                  <a href="javascript:void(0)" ng-click="goRight($index)">right</a> -&gt;
                </div>
              </div>
              <div class="image">
                <img ng-src="{{image.src}}" ng-style="{width: image.width * image.ratio, height: image.height * image.ratio, 'margin-left': image.left, 'margin-top': image.top}">
              </div>
              <div class="description">
                <b>Image {{$index + 1}}</b>
                <div class="remove-button"><a href="javascript:void(0)" ng-click="removePicture(image)">X</a>
                </div>
              </div>
              <div class="change-image">
                <a href="javascript:void(0)" ng-click="editPicture($index)">Changer</a>
              </div>
            </td>
            <td class="frieze-image add-picture" ng-repeat="index in [] | range: 5 - images.length">
              <div class="image">
                <a href="javascript:void(0)" ng-click="addPicture()">Add <br> a new picture</a>
              </div>
            </td>
          </tr>
        </table>

        <div class="manager">
          <button type="button" ng-click="reset()" ng-disabled="saving" class="btn btn-error">Annuler</button>
          <button type="button" ng-click="save()" ng-disabled="saving" class="btn
          btn-success">Valider</button>
          <div class="status">
            {{message}}
          </div>
        </div>

        <input type="file" name="image" class="image-input" accept="image/*">
        <div class="crop-container">
        </div>
      </div>
      <div ng-if="editMenus" id="menus-editor">
        <h1>Administration du menu: </h1>
        <div class="container">
          <div class="color-select-wrapper" div-color-style-setter>
            <div class="color-select">
              <ul>
                <li>Back menu :
                  <input type='text' color-selector ng-model='menus.color.menu.backMenu'>
                </li>
                <li>Text menu :
                  <input type='text' color-selector ng-model='menus.color.menu.textMenu'>
                </li>
                <li>Back Survol :
                  <input type='text' color-selector ng-model='menus.color.menu.backSurvol'>
                </li>
                <li>Text survol :
                  <input type='text' color-selector ng-model='menus.color.menu.textSurvol'>
                </li>
              </ul>
            </div>
            <div class="color-select">
              <ul>
                <li>Back menu :
                  <input type='text' color-selector ng-model='menus.color.subMenu.backMenu'>
                </li>
                <li>Text menu :
                  <input type='text' color-selector ng-model='menus.color.subMenu.textMenu'>
                </li>
                <li>Back Survol :
                  <input type='text' color-selector ng-model='menus.color.subMenu.backSurvol'>
                </li>
                <li>Text survol :
                  <input type='text' color-selector ng-model='menus.color.subMenu.textSurvol'>
                </li>
              </ul>
            </div>
          </div>

          <div class="manager">
            <button type="button" ng-click="reset()" ng-disabled="saving" class="btn btn-error">Annuler</button>
            <button type="button" ng-click="save()" ng-disabled="saving" class="btn
          btn-success">Valider</button>
            <div class="status">
              {{message}}
            </div>
          </div>
          <div class="menus-setting">
            <div ng-hide="retrievingPages">
              <div class="tip">
                Debut 2e ligne de menus
              </div>
              <table>
                <tbody ui:sortable ng-model="menus.items">
                  <tr class="menu-line" ng-repeat="menu in menus.items" style="cursor: move">
                    <td class="wrap">
                      <input type="checkbox" ng-model="menu.wrap" ng-disabled="$index==0">
                    </td>
                    <td class="name">
                      <div ng-class="menu.customMenuColor && 'custom' || ''" class="top-menu" title="{{menu.link}}"
                      data-toggle="tooltip" data-placement="left" div-tooltip>
                        {{menu.name}}
                        <!--<button class="close" ng-click="removeMenu(null, menu)">×</button>-->
                        <ul class="sub-name" ui:sortable ng-model="menu.subs">
                          <li ng-repeat="sub in menu.subs" ng-class="menu.customSubMenuColor && 'custom-sub' || ''"
                          title="{{sub.link}}" data-toggle="tooltip" data-placement="left"
                          div-tooltip>
                            <span title="{{sub.link}}">{{sub.name}} <!--<button
                              class="close" ng-click="removeMenu(menu,
                              sub)">×</button>--> </span>
                          </li>
                          <!--
                      <li ng-class="menu.customSubMenuColor && 'custom-sub' || ''">
                        <ul class="add-menu form-inline" ng-form="addMenuForm" title="Create a new sub menu"
                        data-toggle="tooltip" data-placement="bottom" div-tooltip>
                          <li>
                            <input class="form-control" placeholder="Menu name" name="name" ng-model="subName"
                            required>
                          </li>
                          <li>
                            <input class="form-control" placeholder="Menu link" name="link" ng-model="subLink"
                            required>
                          </li>
                          <li>
                            <button type="button" class="btn btn-success form-control" value="Add" ng-disabled="!addMenuForm.$valid"
                            ng-click="addMenu(menu, subName, subLink)">Add</button>
                          </li>
                        </ul>
                      </li>
                      -->
                        </ul>
                      </div>
                    </td>
                    <td class="menu-custom-color">
                      <input type="checkbox" ng-model="menu.customMenuColor">
                    </td>
                    <td class="menu-custom-color">
                      <input type="checkbox" ng-model="menu.customSubMenuColor">
                    </td>
                  </tr>
                  <!--
              <tr class="menu-line">
                <td class="wrap">
                </td>
                <td class="name">
                  <div class="top-menu">
                    <ul class="add-menu form-inline" ng-form="addMenuForm" title="Create a new top menu"
                    data-toggle="tooltip" data-placement="bottom" div-tooltip>
                      <li>
                        <input class="form-control" placeholder="Menu name" name="name" ng-model="name"
                        required>
                      </li>
                      <li>
                        <input class="form-control" placeholder="Menu link" name="link" ng-model="link"
                        required>
                      </li>
                      <li>
                        <button type="button" class="btn
                            btn-success form-control" value="Add" ng-disabled="!addMenuForm.$valid"
                        ng-click="addMenu(null, name, link)">Add</button>
                      </li>
                    </ul>
                  </div>
                </td>
                <td class="menu-custom-color">
                </td>
                <td class="menu-custom-color">
                </td>
              </tr>
              -->
                </tbody>
              </table>

            </div>
            <h1 ng-show="retrievingPages">Listing pages of your site...</h1>
          </div>
          <!--
        <div class="manager">
          <input type="button" value="Annuler" ng-click="reset()" ng-disabled="saving">
          <input type="button" value="Valider" ng-click="save()" ng-disabled="saving">
        </div>
        -->
        </div>
      </div>
    </div>
  </div>
</body>

</html>



